<template>
  <div class="news-box">
    <el-card class="box-card" shadow="never">
      <div class="search-box" style="overflow: hidden">
        <div class="search-left">
          <el-icon>
            <Search />
          </el-icon>
          <span>筛选搜索</span>
        </div>

        <div class="search-right">
          <el-button @click="resetFun" class="reset-btn">
            <span>重置</span>
          </el-button>
          <el-button type="primary" @click="getLists" class="el-button">
            <span>查询结果</span>
          </el-button>
        </div>
      </div>

      <el-form :model="search" ref="searchForm" label-width="100px" class="search-form" style="overflow-x: auto">
        <el-form-item label="书籍名称:" prop="name">
          <el-input v-model="search.name" size="large" placeholder="请输入内容" @change="getLists" clearable> </el-input>
        </el-form-item>
        <el-form-item label="ISBN编码:" prop="isbn">
          <el-input v-model="search.isbn" size="large" placeholder="请输入内容" @change="getLists" clearable> </el-input>
        </el-form-item>
        <el-form-item label="书籍类型:" prop="type">
          <el-select v-model="search.type" class="m-2" placeholder="书籍类型" size="large" @change="getLists" clearable>
            <el-option v-for="item in types" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="维护人:" prop="weihuren">
          <el-select v-model="search.weihuren" class="m-2" placeholder="维护人" size="large" @change="getLists" clearable>
            <el-option v-for="item in persons" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="采购数量:" prop="caigoucount">
          <el-input v-model="search.caigoucount" size="large" placeholder="请输入内容" @change="getLists" clearable> </el-input>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card class="table-card">
      <template #header>
        <div class="card-header-box">
          <!-- <el-button @click="addLists()" size="large" icon="Plus">添加书籍</el-button> -->
          <Zhekou status="0" :callback="zhekouCB" />
          <el-button type="primary" @click="exportTableFun" class="el-button">
            <span>导出表格</span>
          </el-button>
        </div>
      </template>
    </el-card>
    <el-table :data="lists" border style="width: 100%" @row-click="rowCli" id="table-export">
      <el-table-column prop="id" label="编号" align="center" width="80px" header-align="center"></el-table-column>

      <el-table-column prop="images" label="封面" align="center" header-align="center">
        <template #default="scope">
          <img style="width: 100px; height: 120px" v-if="scope.row.images" :src="scope.row.images" alt="" />
        </template>
      </el-table-column>

      <el-table-column prop="name" label="书籍名称" align="center" header-align="center"> </el-table-column>

      <el-table-column prop="isbn" label="ISBN编码" align="center" header-align="center">
        <template #default="scope">
          <div>{{ scope.row.isbn }}</div>
          <el-button type="primary" style="font-size: 12px; padding: 0 8px" @click="bijiaFun(scope.row.isbn)" class="el-button">
            <span>淘宝比价</span>
          </el-button>
        </template>
      </el-table-column>

      <el-table-column prop="typename" label="书籍类型" align="center" header-align="center"> </el-table-column>

      <el-table-column prop="zhongliang" label="重量" align="center" header-align="center"> </el-table-column>

      <el-table-column prop="dingjia" label="单价" align="center" header-align="center"> </el-table-column>

      <!-- <el-table-column prop="caigoucount" label="采购数量" align="center" header-align="center">
      </el-table-column> -->

      <el-table-column prop="price" label="售价" align="center" header-align="center">
        <template #default="scope">
          <el-input v-model="scope.row.price" placeholder="" @change="changeShangpin(scope.row)" />
        </template>
      </el-table-column>

      <el-table-column prop="caigouprice" label="采购价" align="center" header-align="center">
        <template #default="scope">
          <el-input v-model="scope.row.caigouprice" placeholder="" @change="changeShangpin(scope.row)" />
        </template>
      </el-table-column>

      <el-table-column prop="caigoucount" label="采购数量" width="100px" align="center" header-align="center">
        <template #default="scope">
          <el-input v-model="scope.row.caigoucount" placeholder="" @change="changeShangpin(scope.row)" />
        </template>
      </el-table-column>

      <el-table-column prop="yicaigou" label="已采购" align="center" header-align="center"> </el-table-column>

      <el-table-column prop="weihurenname" label="维护人" align="center" header-align="center"> </el-table-column>

      <el-table-column prop="weihutime" label="维护时间" align="center" header-align="center"> </el-table-column>

      <el-table-column prop="zuozhename" label="作者" align="center" header-align="center"> </el-table-column>

      <el-table-column prop="chubanshe" label="出版社" align="center" header-align="center"> </el-table-column>

      <el-table-column prop="chubantime" label="出版时间" align="center" header-align="center"> </el-table-column>

      <el-table-column prop="doubanScore" label="豆瓣评分" align="center" header-align="center"> </el-table-column>

      <!-- <el-table-column prop="doubannumScore" label="豆瓣评分人数" align="center" header-align="center"> </el-table-column> -->

      <el-table-column label="操作" align="center" header-align="center" width="200px">
        <template #default="scope">
          <el-icon @click.stop="editFun(scope.row)" class="lists-edit-icon">
            <Edit />
          </el-icon>

          <el-icon @click.stop="deleteFun(scope.row.id)" class="lists-delete-icon">
            <Delete />
          </el-icon>

          <!-- <el-icon @click.stop="changeStatusFun(scope.row.id)" class="lists-delete-icon">
            <Setting />
          </el-icon> -->
          <div class="btn-box" style="display: flex; align-item: center; justify-content: center">
            <el-button
              type="primary"
              v-for="(item, index) in statusArr"
              :key="index"
              @click.stop="changeStatus(scope.row.id, item.value)"
              size="small"
              class="el-button"
            >
              <span>{{ item.label }}</span>
            </el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <div style="text-align: right; margin-top: 20px; overflow: hidden">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        @prev-click="handlePrev"
        @next-click="handleNext"
        :current-page="pageNo"
        :page-sizes="[5, 10, 20, 50, 100, 200, 500]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        class="pagination"
      >
      </el-pagination>
    </div>
    <!-- 添加编辑文章类型 -->
    <addEdit :show="showAddEdit" :addEditData="addEditData" :status="addEditStatus" @hide-addEdit="hideAddEdit" />
    <changStatus :show="showStatus" :id="statusId" @hide-change-status="hideStatus" />
  </div>
</template>
<script setup>
import { computed, onMounted, ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { getServerUserListStatus, delteShangpin, editShangpinList, updateShangpinStatus } from '@api/book'
import addEdit from '@/components/form/addEdit.vue'
import changStatus from './components/changStatus.vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useUserStore } from '@/pinia/user'
import { getShujiType } from '@api/bookType'
import { getServerUserList } from '@api/person'
import { exportTable } from '@/utils/toXLSX'
import Zhekou from '@components/common/Zhekou/main.vue'
import { getNowDate } from '@/utils/date'
import { testFloatAndNumber } from '@/utils/validate'

const userStore = useUserStore()

const router = useRouter()

// *********************************************列表
const pageNo = ref(1)
const pageSize = ref(10)
const total = ref(10)
const lists = ref([])

//获取列表
async function getLists() {
  let { name, isbn, type, weihuren, caigoucount } = search.value
  let searchOpt = {
    pageNo: pageNo.value,
    pageSize: pageSize.value,
    status: '0'
  }
  if (name) {
    searchOpt.name = name
  }

  if (isbn) {
    searchOpt.isbn = isbn
  }

  if (type) {
    searchOpt.type = type
  }

  if (weihuren) {
    searchOpt.weihuren = weihuren
  }

  if (caigoucount) {
    searchOpt.caigoucount = caigoucount
  }
  let res = await getServerUserListStatus(searchOpt)

  if (res.code == 200) {
    lists.value = res.data
    total.value = parseInt(res.msg)
  }
}

// 搜索
const searchForm = ref()
const search = ref({
  name: '',
  isbn: '',
  type: '',
  weihuren: ''
})

const resetFun = () => {
  search.value = {
    name: '',
    isbn: '',
    type: '',
    weihuren: ''
  }

  getLists()
}
//pageSize改变
function handleSizeChange(val) {
  pageSize.value = val
  getLists()
}

//pageNo改变
function handleCurrentChange(val) {
  pageNo.value = val
  getLists()
  // this.$store.dispatch('setpageNo', val);
}

//上一页
function handlePrev(val) {
  pageNo.value = val
  getLists()
}

//下一页
function handleNext(val) {
  pageNo.value = val
  getLists()
}

// *********************************************添加编辑
const showAddEdit = ref(false) //显示隐藏弹框
const addEditStatus = ref('add') //添加编辑状态
const addEditData = ref({
  id: '',
  name: '',
  images: [],
  isbn: '',
  type: '',
  zhongliang: '',
  dingjia: '',
  chubantime: '',
  price: '',
  caigouprice: '',
  weihuren: '',
  weihurenname: '',
  caigoucount: '',
  zuozhename: '',
  zuozhejieshao: '',
  chubanshe: '',
  shujijieshao: '',
  doubanScore: '',
  doubannumScore: ''
})

//添加文章
function addLists() {
  addEditData.value = {
    id: '',
    name: '',
    images: [],
    isbn: '',
    type: '',
    zhongliang: '',
    dingjia: '',
    chubantime: '',
    price: '',
    caigouprice: '',
    weihuren: '',
    weihurenname: '',
    caigoucount: '',
    zuozhename: '',
    zuozhejieshao: '',
    chubanshe: '',
    shujijieshao: '',
    doubanScore: '',
    doubannumScore: ''
  }
  addEditStatus.value = 'add'
  showAddEdit.value = true
}

//添加编辑文章回调
function hideAddEdit(type) {
  showAddEdit.value = false
  if (type != 'cancel') {
    getLists()
  }
}

//编辑文章
function editFun(item) {
  const {
    id,
    name,
    images,
    isbn,
    type,
    zhongliang,
    dingjia,
    chubantime,
    price,
    caigouprice,
    weihuren,
    weihurenname,
    caigoucount,
    zuozhename,
    zuozhejieshaom,
    chubanshe,
    shujijieshao,
    doubanScore,
    doubannumScore
  } = item
  addEditData.value = {
    id,
    name,
    images: images
      ? images.split(',').map((v) => {
          return {
            name: v,
            url: v
          }
        })
      : [],
    isbn,
    type,
    zhongliang,
    dingjia,
    chubantime,
    price,
    caigouprice,
    weihuren,
    weihurenname,
    caigoucount,
    zuozhename,
    zuozhejieshaom,
    chubanshe,
    shujijieshao,
    doubanScore,
    doubannumScore
  }
  addEditStatus.value = 'edit'
  showAddEdit.value = true
}

//删除文章
function deleteFun(id, index) {
  ElMessageBox.confirm('确定删除书籍?')
    .then(async () => {
      let res = await delteShangpin({ id })
      if (res.code == 200) {
        getLists()
      }
    })
    .catch(() => {})
}

//查看详情
function rowCli(item, column) {
  // router.push({ path: '/home/news/detail', query: { id: row.id } })
  addEditData.value.id = item.id
  addEditData.value.username = item.username
  addEditData.value.phone = item.phone
  addEditStatus.value = 'read'
  // showAddEdit.value = true
}

// 比价
const bijiaFun = (isbn) => {
  window.open(
    `https://s.taobao.com/search?q=${isbn}&commend=all&ssid=s5-e&search_type=item&sourceId=tb.index&spm=a21bo.jianhua.201856-taobao-item.2&ie=utf8&initiative_id=tbindexz_20170306&sort=sale-desc`
  )
}

// 改变状态
const showStatus = ref(false)
const statusId = ref('')
const changeStatusFun = (id) => {
  statusId.value = id
  showStatus.value = true
}
const hideStatus = (type) => {
  if (type == 'complete') {
    getLists()
  }
  showStatus.value = false
}

// 获取书籍类型
const types = ref([])
const getTypes = async () => {
  let res = await getShujiType()

  if (res.code == 200) {
    types.value = res.data.map((v) => {
      return {
        label: v.name,
        value: v.id + ''
      }
    })
  }
}

// 员工列表
const persons = ref([])
const getPersons = async () => {
  let res = await getServerUserList()

  if (res.code == 200) {
    persons.value = res.data.map((v) => {
      return {
        label: v.username,
        value: v.id + ''
      }
    })
  }
}

// 导出表格
const exportTableFun = () => {
  let tableData = lists.value.map((v) => {
    return {
      编号: v.id,
      名称: v.name,
      ISBN编码: v.isbn,
      书籍类型: v.typename,
      重量: v.zhongliang,
      单价: v.dingjia,
      售价: v.price,
      采购价: v.caigouprice,
      维护人: v.weihurenname,
      采购数量: v.caigoucount,
      作者: v.zuozhename,
      出版社: v.chubanshe,
      出版时间: v.chubantime,
      豆瓣评分: v.doubanScore,
      豆瓣评分人数: v.doubannumScore,
      封面: v.images
    }
  })

  exportTable(tableData, `商品列表`)
}

const zhekouCB = () => {
  getLists()
}

// 改变列信息
const changeShangpin = async (row) => {
  let { price, caigouprice, caigoucount, id } = row

  if (testFloatAndNumber(price) && testFloatAndNumber(caigouprice) && testFloatAndNumber(caigoucount)) {
    let res = await editShangpinList({ price, caigouprice, caigoucount, id })
    if (res.code == 200) {
      ElMessage({
        message: '操作成功!',
        type: 'success'
      })
      row.weihurenname = userStore.userInfo.username
      row.weihutime = getNowDate()
      // getLists()
    }
  } else {
    ElMessage({
      message: '请输入数字!',
      type: 'error'
    })
  }
}

const statusArr = ref([
  {
    label: '黑名单',
    value: '-1'
  },
  {
    label: '精品',
    value: '2'
  },
  {
    label: '新品',
    value: '1'
  }
])

const changeStatus = async (id, status) => {
  let res = ''

  res = await updateShangpinStatus({ id: id, status })

  if (res.code == 200) {
    ElMessage({
      message: '操作成功!',
      type: 'success'
    })

    getLists()
  }
}

onMounted(() => {
  getLists()
  getTypes()
  getPersons()
})
</script>
<style lang="scss" scoped>
.news-box {
  position: absolute;
  top: 20px;
  left: 20px;
  right: 20px;
  bottom: 20px;

  .left-right-box {
    position: absolute;
    top: 172px;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;

    .left-box {
      height: 100%;
      width: 230px;
      overflow-y: auto;
      overflow-x: hidden;
      padding-top: 50px;
      box-sizing: border-box;
      border: 1px solid #ebeef5;
      position: relative;
      overflow-y: auto;
      border-radius: 4px;
      margin-right: 20px;

      .title {
        font-size: 14px;
        padding: 8px 17px;
        color: #636363;
        height: 32px;
        line-height: 32px;
        font-weight: 600;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        background: #fff;
        z-index: 999;

        .icon {
          float: right;
          font-size: 24px;
          font-weight: 400;
          cursor: pointer;
        }
      }

      .left-lists {
        font-size: 12px;
        padding: 8px 17px;
        color: #636363;
        height: 32px;
        line-height: 32px;
        cursor: pointer;
        position: relative;

        .name {
          float: left;
        }

        .input-name {
          width: 90px;
          float: left;
          padding: 0;

          .el-input__inner {
            padding: 0 10px;
          }
        }

        .option {
          float: right;
        }
      }
    }

    .left-lists.active {
      color: #4c9ff2 !important;
      background-color: #f5f5f5;
    }

    .right-box {
      flex: 1;
      overflow-y: auto;
    }
  }
}
</style>
